<template>
    <div class="addAccount">
        <el-card>
            <el-button type="info" size="small" icon="el-icon-arrow-left"
                @click="backToPrev">
                返回</el-button>
            <el-form size="small" class="addForm">
                <el-row :gutter="20">
                    <el-col :span="12">
                        <el-form-item required>
                            <span slot="label">
                                <span class="labelText">类型</span>
                            </span>
                            <div class="choose">
                                <el-select v-model="addForm.type"
                                    placeholder="请选择类型">
                                    <el-option label="银联" value="0"></el-option>
                                    <el-option label="微信" value="1"></el-option>
                                    <el-option label="支付宝" value="2"></el-option>
                                </el-select>
                            </div>
                        </el-form-item>
                        <el-form-item required>
                            <span slot="label">
                                <span class="labelText">名称</span>
                            </span>
                            <el-input v-model="addForm.account"></el-input>
                        </el-form-item>
                        <el-form-item>
                            <span slot="label">
                                <span class="labelText">标题</span>
                            </span>
                            <el-input v-model="addForm.head"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item>
                            <span slot="label">
                                <span class="labelText">选择状态</span>
                            </span>
                            <div class="choose">
                                <el-select v-model="addForm.status"
                                    placeholder="请选择状态">
                                    <el-option label="有效" value="0"></el-option>
                                    <el-option label="无效" value="1"></el-option>
                                </el-select>
                            </div>
                        </el-form-item>
                        <el-form-item>
                            <span slot="label">
                                <span class="labelText">开户人</span>
                            </span>
                            <el-input v-model="addForm.handler"></el-input>
                        </el-form-item>
                        <el-form-item>
                            <span slot="label">
                                <span class="labelText">描述</span>
                            </span>
                            <el-input type="textarea"
                                v-model="addForm.remark"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-form-item class="subBtn">
                    <el-button type="primary" @click="onSubmit">保存</el-button>
                    <el-button @click="cancel">取消</el-button>
                </el-form-item>
            </el-form>

        </el-card>

    </div>
</template>
  
<script>
import dayjs from 'dayjs';
export default {
    name: '',
    data() {
        return {
            addForm: {
                "account": '',
                "amount": 0,
                "annex": "",
                "createTime": "",
                "deptId": 0,
                "description": "",
                "handleTime": "",
                "handler": "",
                "head": "",
                "id": 0,
                "isDeleted": 0,
                "remark": "",
                "status": '',
                "type": '',
                "updateTime": ""
            },
            drugPaList: []
        }
    },
    components: {

    },
    methods: {
        dayjs,

        backToPrev() {
            this.$router.push('/financial/accManage')
        },
        cancel() {
            this.addForm = {
                "account": '',
                "amount": 0,
                "annex": "",
                "createTime": "",
                "deptId": 0,
                "description": "",
                "handleTime": "",
                "handler": "",
                "head": "",
                "id": 0,
                "isDeleted": 0,
                "remark": "",
                "status": '',
                "type": '',
                "updateTime": ""
            }
        },
        async onSubmit() {
            this.addForm.createTime = new Date(dayjs().format("YYYY-MM-DD HH:mm:ss"));
            console.log(this.addForm);
            let res = await this.$axios({
                method: 'post',
                url: '/FinancialManagement/Account/addAccount',
                data: this.addForm
            });
            console.log(res);
            if (res.data.code === 200) {
                //跳转到列表页面
                this.$router.push('/financial/accManage')
                //提示
                this.$message({
                    message: '恭喜你，添加账户成功',
                    type: 'success'
                });
            } else {
                //错误信息提示
                this.$message.error('出现错误，添加账户失败');
            }
        }
    }
}
</script>

<style scoped>
.addAccount {
    margin: 20px 5px 0;
}

.labelText {
    font-size: 14px;
    font-weight: 600;
    color: #000;
}

hr {
    height: 0px;
    border: 1px solid #6c7b8b;
}

.subBtn {
    text-align: center;
}

/* element样式修改 */
.choose>>>.el-select {
    display: block;
}

.dateChoose>>>.el-date-editor {
    display: block;
    width: 100%;
}

.dateChoose>>>.el-input__prefix {
    top: 17px;
}

.choose>>>.el-select .el-input__suffix {
    top: 15px;
}
</style>